<template>
  <div>
    <div class="aerialview-row">
      <div class="el-tabs">
        <div class="el-tabs__header">
          <div class="el-tabs__nav-wrap">
            <div class="el-tabs__nav">
              <div
                class="el-tabs__item"
                @click="aerialviewvalue = 1"
                :class="aerialviewvalue == 1 ? 'is-active' : ''"
              >
                充电桩控制
              </div>
              <!-- <div
                class="el-tabs__item"
                @click="aerialviewvalue = 99"
                :class="aerialviewvalue == 99 ? 'is-active' : ''"
              >
                工位视图
              </div> -->
              <div
                class="el-tabs__item"
                @click="aerialviewvalue = item.id"
                :class="aerialviewvalue == item.id ? 'is-active' : ''"
                v-for="(item, index) in observrtabdata"
                :key="index"
              >
                {{ item.name }}
                <div class="observr-btn-row">
                  <div @click.stop="editobserve(index,item)" class="el-icon-edit-outline"></div>
                  <div @click.stop="delobserve(index,item)" class="el-icon-delete"></div>
                  
                </div>
              </div>
              <div class="add-observe-btn" @click="addObservePopup">
                <i class="el-icon-plus"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="el-tabs__content">
          <div class="el-tab-pane" v-if="aerialviewvalue == 1">
            <aerial-view></aerial-view>
          </div>
           <div class="el-tab-pane" v-else>
            <station ref="currencyObserveChild" :viewId="aerialviewvalue"></station>
          </div>
          <!-- <div class="el-tab-pane" v-else>
            <currency-observe ></currency-observe>
          </div> -->
        </div>
      </div>
    </div>
    <div class="Plugpop-section">
      <el-dialog
        :visible.sync="addObserveVisible"
        width="850px"
        :title="ObserveNmae!=null?'新建视图':ObserveNmae"
        :close-on-click-modal="false"
      >
        <div class="addObserve-input-row">
          <p>视图名称</p>
          <el-input
            v-model="ObserveNmae"
            placeholder="请输入视图名称"
          ></el-input>
        </div>
        <div class="addObserve-input-row">
          <p>设为默认</p>
          <el-radio style="margin-top: 10px" v-model="Observedefault" :label="0"
            >是</el-radio
          >
          <el-radio style="margin-top: 10px" v-model="Observedefault" :label="1"
            >否</el-radio
          >
        </div>
        <div class="addObserve-input-row">
          <p>区域勾选</p>
          <el-tree
            :data="dialogAreaData"
            ref="refdialogAreaTree"
            :check-strictly="true"
            show-checkbox
            node-key="id"
            :default-checked-keys="areaIds"
            :props="treeProps"
            @check="gettreeid"
          >
          </el-tree>
        </div>
        <div style="text-align: center; margin-top: 20px">
          <el-button @click="submitaddObserve" size="medium" type="primary"
            >确 定</el-button
          >
          <el-button size="medium" @click="addObserveVisible = false"
            >取 消</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import AerialView from "../admin/components/AerialView/AerialView.vue";
import Station from "./Station/Station.vue";
import ajax from "@/utils/ajax";
export default {
  components: {
    AerialView,
    Station,
  },
  data() {
    return {
      aerialviewvalue: 1,
      observrtabdata: [],
      addObserveVisible: false,
      customerId: null,
      treeProps: {
        children: "children",
        label: "name",
      },
      dialogAreaData: [],
      areaIds: [],
      ObserveNmae: "",
      Observedefault: true,
      observrindex:0,
      addobser:true
    };
  },
  created() {
    this.customerId = this.$store.getters.customerId;
    this.getobserveList()
    this.getUserTargetArea()
  },
  methods: {
    // 新增视图弹窗打开
    addObservePopup() {
      this.addObserveVisible = true;
      this.addobser=true
    },
    // 区域勾选
    gettreeid() {
      const obj = this.$refs.refdialogAreaTree.getCheckedNodes()
      this.areaIds.length = 0;
      console.log(obj)
      obj.forEach(ele => {
        this.areaIds.push(ele.id)
      });
      // console.log(this.$refs.refdialogAreaTree.getCheckedNodes());
    },
    // 新增、修改视图 提交
    submitaddObserve() {
      if(this.addobser){

        if ((this.ObserveNmae ?? "") !== "") {
          // let attr = {};
          // attr.name = this.ObserveNmae;
          // attr.id = this.observrtabdata.length + 2;
          // this.observrtabdata.push(attr);

          let params = {};
          params.name = this.ObserveNmae;
          params.isDefault = this.Observedefault;
          params.areaIds = this.areaIds;

          ajax.post({
            url: this.$API.createObserve,
            data: params,
            success: (res)=>{
              this.addObserveVisible = false;
              this.$message({
                message: '创建成功',
                type: 'success',
              })

              this.observrtabdata.push(params)
            },
          })
        } else {
          this.$message({
            message: '视图名称不能为空',
            type: 'info',
          })
        }
      }else{
        let params = {...this.observrtabdata[this.observrindex]}
        params.name = this.ObserveNmae;
        params.isDefault = this.Observedefault;
        params.areaIds = this.areaIds;
        delete params.createTime

        ajax.post({
          url: this.$API.updateObserve,
          data: params,
          success: (res)=>{
            this.addObserveVisible = false;
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            
            this.$set(this.observrtabdata, this.observrindex, params);
            this.$refs.currencyObserveChild.getOrganListdata();
          }
        })
      }
      
    },
    // 修改视图弹窗打开
    editobserve(index,item) {
      this.observrindex=index
      this.addObserveVisible = true;
      this.addobser=false

      this.ObserveNmae=item.name;
      this.Observedefault=item.isDefault;

      ajax.get({
        url: `${this.$API.getViewHasAreaIds}/${item.id}`,
        success: (res)=>{
        this.$nextTick(()=>{

            this.areaIds = [];
            res.data.forEach(data=>{
              this.areaIds.push(data.id)
            })
        })
        
        }
      })
    },
    // 删除视图
    delobserve(index,item){
      ajax.post({
        url: `${this.$API.deleteObserve}/${item.id}`,
        success: (res)=>{
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.observrtabdata.splice(index,1)
        }
      })
    },
    // 获取用户创建的视图
    getobserveList(){
      ajax.get({
        url: this.$API.getObserveList,
        success: (res)=>{
          const data = res.data;
          this.observrtabdata = data;
        }
      })
    },
    // 获取用户管理的区域
    getUserTargetArea(){
      ajax.get({
        url: this.$API.getUserTargetArea,
        success: (res)=>{
          let data = res.data;
          // data.forEach(ele=>{
          //   ele.disabled = true;
          // })
          console.log('data',data)
          this.dialogAreaData = data;
        }
      })
    }
  },
};
</script>
<style lang="stylus" type="text/stylus" scoped>
$adminH = 10.1rem;
$sideW = 3.94rem;
$titleW = 3.85rem;
$areaTreeW = 3.8rem;

.aerialview-row {
  position: absolute;
  top: 0;
  left: 0rem;
  right: 0;
  bottom: 0;
  height: 10.1rem;
  padding: 0.05rem 0.05rem 0.05rem 0.09rem;
  // border-left: solid 0.01rem #9cf;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep.el-tabs {
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;

  .el-tabs__header {
    // width: 15.23rem;
    height: 0.5rem;
    margin-bottom: 0;
    margin-top: -0.05rem !important;
    margin-left: -0.08rem !important;
    background-color: #0d2c5a !important;
    border-bottom: solid 0.01rem #0d235a !important;
    box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
    box-sizing: border-box;
    .el-tabs__nav{
      display: flex;
    
    align-items: center;
      }
    .el-tabs__item {
  width: 1.8rem;
        text-overflow: ellipsis;
    overflow: hidden;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 0.08rem !important;
      border-radius: 5px 5px 0px 0px;
      border: solid 1px #0d235a !important;
      border-bottom: 0 !important;
      margin-top: 0.06rem !important;
      color: #fff !important;
      font-size: 0.16rem !important;
      position: relative;
    }
    
    .el-tabs__item.is-active {
      background-color: #29388a !important;
      color: #fff !important;
    }
  }

  .el-tabs__content {
    background-color: #29388a;
    padding: 0 !important;
    overflow: visible;
  }

  .el-tab-pane {
    padding-top: 0.1rem;
  }
}

.el-tabs__nav-wrap::after {
  display: none;
}

.add-observe-btn {
  display: inline-block;
  font-size: 18px;
  height: 0.3rem;
  margin-left: 11px;
  width: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  cursor: pointer;

  i {
    font-weight: bold;
  }
}

.add-observe-btn:hover {
  border-radius: 50%;
  background: #29388a;
}

.addObserve-input-row {
  display: flex;
  margin-bottom: 15px;

  p {
    margin-right: 15px;
    margin-top: 10px;
    color: #fff;
  }

  .el-input {
    width: 30%;
  }
}

::v-deep.el-tree>div {
  margin-top: 0rem;
}

::v-deep.el-tree{
  .is-disabled{
    .el-checkbox__inner{
      background-color: #989da7;
    }
  }
}
  
.observr-btn-row {
    position: absolute;
  
    top: 0;
    right: 0;
    align-items: center;
    bottom: 0;
    display: none
    div{
      margin-right:10px
    }
}
.el-tabs__item:hover .observr-btn-row{
  display: flex}
</style>